import React, { ReactElement, useState } from 'react';
import {
  View,
  Text,
  Image,
  TextInput,
  Keyboard,
  ScrollView
} from 'react-native';
import { NavigationScreenProps } from 'react-navigation';

import Button from '../../components/Button';
import NavBar from '../../components/NavBar';
import Notch, { NotchType } from '../../components/Notch';
import SelectPic from '../../components/SelectPic';
import { APP_LIGHT_GREY } from '../../constant/color';
import {
  avatar,
  changeHead,
  changeNick,
  changeSex,
  female,
  genderSelected,
  male,
  mineRightArrow,
  rightArrow
} from '../../constant/resource';
import { setUserInfo } from '../../store/user';
import { modalOpen } from '../../util/global';
import { GENDER } from '../TabNav/components/Person/constant';
import { back, backAlert, sureSave, uploadHeadPortrait } from './actions';

import styles from './style';

export default (props: NavigationScreenProps): ReactElement => {
  const { navigation } = props;
  const initHeadPortrait = navigation.getParam('headPortrait', '');
  const initNickName = navigation.getParam('nickName', '');
  const initGender = navigation.getParam('gender', GENDER.Unknown);

  const [headPortrait, setHeadPortrait] = useState(initHeadPortrait);
  const [nickName, setNickName] = useState(initNickName);
  const [gender, setGender] = useState(initGender);

  return (
    <Notch style={styles.container} type={NotchType.Top}>
      <NavBar
        title="个人信息"
        backAction={(): void => {
          if (
            initHeadPortrait === headPortrait &&
            initNickName === nickName &&
            initGender === gender
          ) {
            back();
            return;
          }
          backAlert();
        }}
      />
      <ScrollView contentContainerStyle={styles.content}>
        <Button
          style={styles.button}
          onPress={(): void => {
            Keyboard.dismiss();
            modalOpen({
              Type: (): React.ReactElement => (
                <SelectPic
                  action={async (image): Promise<void> => {
                    const uploadRes = await uploadHeadPortrait(
                      `data:${image.mime};base64,${image.data}`
                    );

                    if (uploadRes) {
                      setHeadPortrait(uploadRes);
                      setUserInfo({ headUrl: uploadRes });
                    }
                  }}
                />
              ),
              needBack: true,
              needClose: true
            });
          }}
        >
          <View style={styles.loadTitle}>
            <Image
              source={changeHead}
              style={styles.setAvatarIcon}
              resizeMode="contain"
            />
            <Text style={styles.title}>修改头像</Text>
          </View>
          <View style={styles.loadAvatar}>
            <Image
              source={headPortrait ? { uri: headPortrait } : avatar}
              style={styles.avatar}
            />
            <Image
              source={rightArrow}
              style={styles.arrow}
              resizeMode="contain"
            />
          </View>
        </Button>
        <View style={styles.item}>
          <View style={styles.loadTitle}>
            <Image source={changeNick} style={styles.setIcon} />
            <Text style={styles.title}>修改昵称</Text>
          </View>
          <TextInput
            style={styles.input}
            placeholder="请输入你的昵称"
            placeholderTextColor={APP_LIGHT_GREY}
            value={nickName}
            onChangeText={setNickName}
            maxLength={8}
          />
        </View>
        <View style={styles.item}>
          <View style={styles.loadTitle}>
            <Image source={changeSex} style={styles.setGenderIcon} />
            <Text style={styles.title}>修改性别</Text>
          </View>
          <View style={styles.loadGender}>
            <Button
              style={styles.selectGender}
              onPress={(): void => {
                setGender(GENDER.Male);
              }}
            >
              <View style={styles.loadGenderIcon}>
                <Image source={male} style={styles.genderIcon} />
                {gender === GENDER.Male && (
                  <Image
                    source={genderSelected}
                    style={styles.genderSelectedIcon}
                  />
                )}
              </View>
              <Text style={styles.genderDesc}>我是小男生</Text>
            </Button>

            <Button
              style={styles.selectGender}
              onPress={(): void => {
                setGender(GENDER.Female);
              }}
            >
              <View style={styles.loadGenderIcon}>
                <Image source={female} style={styles.genderIcon} />
                {gender === GENDER.Female && (
                  <Image
                    source={genderSelected}
                    style={styles.genderSelectedIcon}
                  />
                )}
              </View>
              <Text style={styles.genderDesc}>我是小女生</Text>
            </Button>
          </View>
        </View>
      </ScrollView>
      <Button
        style={styles.save}
        text="保存"
        textStyle={styles.saveDesc}
        onPress={(): void => {
          sureSave(headPortrait, nickName, gender);
        }}
      />
    </Notch>
  );
};
